{% extends 'myapp/base.html' %}

{% block main_body %}
    <!-- Content Header (Page header) -->
    <section class="content-header">

    </section>
    
    <div class="panel panel-info">
      <div class="panel-heading">
          <h3 class="panel-title"><li class="fa fa-circle-o-notch"></li>&emsp;血氧&emsp;&emsp;&emsp;人体正常血氧饱和度为95%以上</和>

        </div>
        <div class="panel-body">
            <div class="column1">
                
                    <div class="box-body">
                      <div class="row">
                        <div class="col-xs-3">
                          <input type="text" class="form-control" value="{{physics.temperature}}℃">
                        </div>
                        <div class="col-xs-4">
                          <input type="text" class="form-control" value="上次测量时间 {{physics.time}}">
                        </div>
                       
                      </div>
                    </div>
                    <!-- /.box-body -->
                  </div>
            </div>  
        </div>

        <div class="panel panel-success">
          <div class="panel-heading">
              <h3 class="panel-title"><li class="	fa fa-thermometer-2"></li>&emsp;体温&emsp;&emsp;&emsp;</li>人体正常体温范围：36.2℃～37.2℃</h3>
    </div>
    <div class="panel-body">
        <div class="column1">
            
                <div class="box-body">
                  <div class="row">
                    <div class="col-xs-3">
                      <input type="text" class="form-control" value="{{physics.bloodoxygen}}%">
                    </div>
                    <div class="col-xs-4">
                      <input type="text" class="form-control" value="上次测量时间 {{physics.time}}">
                    </div>

                  </div>
                </div>
                <!-- /.box-body -->
              </div>
        </div>  
    </div>

    <div class="panel panel-danger">
        <div class="panel-heading">
          <h3  class="panel-title"><li class="	fa fa-heartbeat"></li>&emsp;心率&emsp;&emsp;&emsp;人体正常安静心率60～100次/分</h3>
        </div>
        <div class="panel-body">
            <div class="column1">
                
                    <div class="box-body">
                      <div class="row">
                        <div class="col-xs-3">
                          <input type="text" class="form-control" value="{{physics.heartrate}}bpm">
                        </div>
                        <div class="col-xs-4">
                          <input type="text" class="form-control" value="上次测量时间 {{physics.time}}">
                        </div>
                      </div>
                    </div>
                    <!-- /.box-body -->
                  </div>
            </div>  
    </div>

    

    <div class="panel panel-danger">
      <div class="panel-heading">
        
          <h3 class="panel-title">
            <li class="fa fa-angle-double-down"></li>&emsp;实时心率&emsp;&emsp;&emsp;</h3>
      </div>
      <div class="panel-body">
        <head>

          <!-- 引入 Plotly.js 库 -->
          <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
        </head>
      <body>
          <!-- 绘制曲线图的 div 元素 -->
          <div id="realtimeChart"></div>
  
          <script>
              socket = new WebSocket("ws://127.0.0.1/index/AI/data/");
              socket.onmessage = function (event) {
                  socket.send("ok")
              }
              
              // 初始化数据
              var x = [], y = [];

              // 绘制曲线图的数据
              var data = [
                  {
                      x: x,
                      y: y,
                      type: 'scatter'
                  }
              ];

              // 绘制曲线图的配置项
              var layout = {

                  xaxis: {
                      title: 'time'
                  },
                  yaxis: {
                      title: 'bpm'
                  }
              };

              // 使用 Plotly.js 绘制曲线图
              Plotly.newPlot('realtimeChart', data, layout);

              // 定时器更新数据
              setInterval(function() {
                  // 随机生成数据
                  var xVal = new Date().getTime();
                  
                  // 添加新数据
                  x.push(xVal);
                  socket.onmessage = function(event){
                      
                      y.push(event.data)
                  }
      
                  // 更新曲线图
                  Plotly.update('realtimeChart', {x: [x], y: [y]});
              }, 2); // 每隔一秒钟更新一次数据
          </script>
      </body>
  </div>     


      </div>  
    </div>





    <div class="panel-body">

    </div>
</div>

</div>

{% endblock %}